vue<template>
  <ele-page flex-table>
    <!-- 搜索表单 -->
    <PageSearch :supplierList @search="reload" />

    <ele-card :body-style="{ paddingTop: '8px' }">
      <!-- 表格 -->
      <ele-pro-table
        ref="tableRef"
        v-model:selections="selections"
        row-key="id"
        :columns="columns"
        :datasource="datasource"
        :show-overflow-tooltip="false"
        highlight-current-row
        cache-key="PurchaseEnterTable"
      >
        <template #toolbar>
        </template>

        <template #order_sn="{ row }">
          <ele-copyable :text="row.order_sn">
            <el-link type="primary" @click="openPageTab(`/purchase/enter/info/${row.id}`)">{{ row.order_sn }}</el-link>
          </ele-copyable>
        </template>

        <template #obj_sn="{ row }">
          <div class="flex-a">
            <div class="mr-4px"><el-tag size="small" :type="getType(row.type)">{{ row.obj_type_name || row.type_name }}</el-tag></div>
            <ele-copyable :text="row.obj_sn">
              <el-link type="primary" underline="never" @click="openPageTab(`/purchase/index/info/${row.obj_id}`)">{{ row.obj_sn }}</el-link>
            </ele-copyable>
          </div>
        </template>

        <template #oen_sn="{ row }">
          <ele-copyable :text="row.oen_sn">
            <el-link type="primary" underline="never" @click="openPageTab(`/enter/notice/info/${row.oen_id}`)">{{ row.oen_sn }}</el-link>
          </ele-copyable>
        </template>

        <template #status="{ row }">
          <el-tag :type="getType(row.status, { YS: 'warning' })">
            {{ row.status_name }}
          </el-tag>
        </template>
        <template #action="{ row }">
          <el-link type="primary" underline="never" @click="openPageTab(`/enter/notice/info/${row.oen_id}`)">
            <ele-dot v-if="row.is_sh" type="danger" ripple text="详情" />
            <span v-else>详情</span>
          </el-link>
        </template>
      </ele-pro-table>
    </ele-card>
  </ele-page>
</template>

<script setup>
import { listSupplier } from '@/api/common'
import { ref } from 'vue'
import PageSearch from './components/search.vue'

defineOptions({ name: 'PurchaseEnter' })

const router = useRouter()

const { getType, usePageTab } = utils

// 激活页面刷新table
utils.useActivatedReload(() => tableRef.value?.reload?.())

const { addPageTab } = usePageTab()

/** 表格实例 */
const tableRef = ref(null)

const [supplierList] = utils.useGetList(listSupplier)

/** 表格选中数据 */
const selections = ref([])

// utils.useTableReload(() => {
//   tableRef.value?.reload?.()
// })

/** 表格列配置 */
const columns = ref([
  {
    type: 'selection',
    columnKey: 'selection',
    width: 40,
    align: 'center',
    fixed: 'left',
    showOverflowTooltip: false,
  },
  {
    type: 'index',
    label: '序',
    width: 50,
    align: 'center',
    fixed: 'left',
  },
  {
    prop: 'order_sn',
    label: '单据编号',
    width: 200,
    align: 'left',
    slot: 'order_sn',
  },
  {
    prop: 'oen_sn',
    label: '入库通知单',
    width: 200,
    align: 'left',
    slot: 'oen_sn',
  },
  {
    prop: 'obj_sn',
    label: '关联订单',
    width: 240,
    align: 'left',
    slot: 'obj_sn',
  },
  {
    prop: 'supplier_name',
    label: '货主',
    minWidth: 100,
    align: 'center',
  },
  {
    prop: 'warehouse_name',
    label: '收货仓库',
    minWidth: 100,
    align: 'center',
  },
  {
    prop: 'status_name',
    slot: 'status',
    label: '订单状态',
    align: 'center',
    width: 100,
  },
  {
    prop: 'notice_num',
    label: '通知收货数量',
    align: 'center',
    width: 110,
  },
  {
    prop: 'review_num',
    label: '待验收数量',
    align: 'center',
    width: 100,
  },
  {
    prop: 'enter_num',
    label: '入库数量',
    align: 'center',
    width: 100,
  },
  {
    prop: 'remark',
    showOverflowTooltip: true,
    label: '备注',
    align: 'center',
    width: 100,
  },
  {
    prop: 'create_user_name',
    label: '创建人',
    width: 100,
    align: 'center',
  },
  {
    prop: 'create_time',
    label: '创建时间',
    formatter: (row) => {
      return utils.formatDate(row.create_time)
    },
    align: 'center',
    width: 160,
    showOverflowTooltip: false,
  },
  {
    columnKey: 'action',
    label: '操作',
    align: 'right',
    slot: 'action',
    fixed: 'right',
    showOverflowTooltip: false,
    width: 80,
  },
])

/** 表格数据源 */
function datasource({ page, limit, where, orders }) {
  return utils.get('/purchase/enterList', { ...where, ...orders, page, limit })
}

/** 搜索 */
function reload(where) {
  selections.value = []
  tableRef.value?.reload?.({ page: 1, where })
}

/** 打开编辑弹窗 */
function openPageTab(path) {
  addPageTab({
    key: path,
    closable: true,
  })
  router.push(path)
}
</script>
